<template>
  <div class="earthlist">
    <Card shadow class="card">
      <!-- 头部 -->
      <div class="head">
        <div class="head1">
          <Icon type="ios-list-box-outline" size="18"/>
          <span style="position:relative; top:2px; ">地震列表</span>
        </div>
      </div>
      <div class="content">
        <!-- “添加地震”按钮 -->
        <div class="button1">
          <Button @click="modal1 = true">
            <Icon type="md-add"/>添加地震
          </Button>
        </div>
        <!-- 添加地震的弹框 -->
        <Modal v-model="modal1" title="地震信息" @on-ok="ok" :mask-closable="false">
          <div>
            <span>日期：</span>
            <DatePicker
              type="date"
              confirm
              placeholder="日期"
              style="width: 70%"
              :value="data.time"
              @on-change="changeDate"
            />
          </div>
          <div style="margin-top: 6px">
            <span>地点：</span>
            <Input placeholder="地点" style="width: 70%" v-model="data.address"/>
          </div>
          <div style="margin-top: 6px">
            <span>震级：</span>
            <Input placeholder="震级" style="width: 70%" v-model="data.magnitude"/>
          </div>
        </Modal>
        <!-- 地震列表-->
        <TableItem show="show" remove="remove"/>
        <!-- 翻页 -->
        <Page :total="1" prev-text="上一页" next-text="下一页"/>
      </div>
    </Card>
  </div>
</template>
<script>
import TableItem from "@/components/TableItem.vue";
export default {
  name: "NewEarthlist",
  data() {
    return {
      modal1: false,
      data: {
        time: "",
        magnitude: "",
        address: "",
      }
    };
  },
  methods: {
    ok() {
       this.$store.dispatch("addEarthlist",
        {
          time: this.data.time,
          magnitude: this.data.magnitude,
          address: this.data.address,
        }
      );
      this.data.time = "";
      this.data.address = "";
      this.data.magnitude = "";
    },
    changeDate(time) {
      this.data.time = time;
    }
  },
  components: {
    TableItem
  }
};
</script>
<style>
.earthlist {
  padding-left: 16px;
  padding-right: 16px;
}
.earthlist .card .head {
  font-size: 13px;
  line-height: 2.5;
  padding-left: 8px;
  /* box-shadow: 0px 2px 3px 0px; */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.earthlist .card .head .head1 .icon {
  padding-right: 4px;
}
.earthlist .card .content {
  padding: 12px 10px 10px 10px;
  box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.3);
}
.earthlist .card .content .button1 {
  margin-bottom: 10px;
  font-size: 13px;
}
.earthlist .card .ivu-card-body {
  padding: 0;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content {
  width: 520px;
  height: 251.88px;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content {
  height: 251.88px;
}
.ivu-modal-wrap .ivu-modal .ivu-modal-content .ivu-modal-body {
  line-height: 2;
}
.ivu-modal-wrap .ivu-modal-content .ivu-modal-footer {
  text-align: left;
}
.ivu-modal-wrap
  .ivu-modal-content
  .ivu-modal-body
  .ivu-modal-confirm
  .ivu-modal-confirm-body {
  padding-left: 0px;
}
.ivu-modal-wrap
  .ivu-modal-content
  .ivu-modal-body
  .ivu-modal-confirm
  .ivu-modal-confirm-footer {
  text-align: left;
}
</style>